<template>
  <div class="totop">
    <div v-for="(item, index) in cs" :key="index">{{item.item}}</div>
    <div class="btn" @click="toTopBtn()">▲</div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "ToTop",
  data() {
    return {
      cs: [
        { item: "1.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "2.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "3.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "4.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "5.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "6.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "7.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "8.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "9.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "10.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。"},
        { item: "11.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "12.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "13.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "14.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" },
        { item: "15.密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。" }
      ],
      timer: null
    };
  },
  methods: {
    toTopBtn: function() {
      var that = this;
      var nowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(/* function */ callback, /* DOMElement */ element) {
          window.setTimeout(callback, 1000 / 60); //定义每秒执行60次动画
        };
      debugger;
      window.requestAnimFrame ? window.requestAnimFrame(function() {
          return that.requestFrameUpdateScrollTop(
            new Date().getTime(),
            nowScrollTop
          );
        })
      : that.setTimeUpdateScrollTop(nowScrollTop);
    },
    requestFrameUpdateScrollTop: function(startTime, scrollTop) {
      var that = this;
      var timeStep = 20;
      // 总时间 2000 ms
      var allX = 2000 / timeStep;
      var startX = 0;

      // 系数
      var ratio = scrollTop / Math.log(allX + 1);
      // 定积分可得
      var speed = ratio * (1 / (startX + 1));
      var time = new Date().getTime();
      var timeDiff = time - startTime;
      startX += Math.floor(timeDiff / timeStep) + 1;
      scrollTop = scrollTop - speed * startX;
      scrollTop = scrollTop <= 1 ? 0 : scrollTop;
      /*if (window.pageYOffset) {
        window.pageYOffset = scrollTop;
      } else*/ if (document.documentElement.scrollTop) {
        document.documentElement.scrollTop = scrollTop;
      } else if (document.body.scrollTop) {
        document.body.scrollTop = scrollTop;
      }
      if (scrollTop > 0) {
        window.requestAnimFrame(function() {
          return that.requestFrameUpdateScrollTop(Date.now(), scrollTop);
        });
      }
    },
    setTimeUpdateScrollTop: function(scrollTop) {
      var that = this;
      if (that.timer) {
        return;
      }

      var timeStep = 20;
      // 总时间 2000 ms
      var allX = 2000 / timeStep;
      var startX = 0;
      // 系数
      var ratio = scrollTop / Math.log(allX + 1);
      // 定积分可得

      that.timer = setInterval(function() {
        var speed = ratio * (1 / (startX + 1));
        console.log(speed);
        startX++;
        scrollTop = scrollTop - speed;
        /*if (window.pageYOffset) {
          window.pageYOffset = scrollTop < 0 ? 0 : scrollTop;
        } else */ if (document.documentElement.scrollTop) {
          document.documentElement.scrollTop = scrollTop < 0 ? 0 : scrollTop;
        } else if (document.body.scrollTop) {
          document.body.scrollTop = scrollTop < 0 ? 0 : scrollTop;
        }
        if (scrollTop <= 0) {
          clearInterval(that.timer);
          that.timer = null
        }
      }, timeStep);
    },
    scrollToTop() {
      var topBtn = document.querySelector(".btn");
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var browserHeight = window.outerHeight
      if (scrollTop + window.innerHeight > browserHeight) {
        topBtn.style.display = "block"
      } else {
        topBtn.style.display = "none"
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.scrollToTop)
    }
  },
  mounted: function() {
    window.addEventListener("scroll", this.scrollToTop)
  }
}
</script>
<style lang="less" scoped>
.totop {
  width: 100%;
  height: auto;
  div {
    padding: 10px;
    height: 200px;
    width: 100%;
  }
  .btn {
    position: fixed;
    right: 20px;
    bottom: 10%;
    width: 60px;
    height: 60px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    color: #fff;
    background: rgba(0, 154, 98, 1);
    cursor: pointer;
  }
}
</style>
